<template>
  <div>
    <ul>
      <li>欢迎光临_vue开发的收银系统_水果店</li>
      <li><h2>苹果10元/斤,折扣8折</h2></li>
      <li>请输入你要购买的斤数<input type="text" v-model="age" /></li>
      <li>
        结账单:{{ age * 10 }} 元 折后价:{{ age * 10 * 0.8 }} 元 省了:{{
          age * 10 - age * 10 * 0.8
        }}
        元
      </li>
    </ul>
    <hr />
    <ul>
      <li>欢迎光临_vue开发的收银系统_水果店</li>
      <li><h2>苹果10元/斤,折扣8折</h2></li>
      <li>请输入你要购买的斤数<input type="text" v-model="num" /></li>
      <li><button @click="btn(num)">结账买单</button></li>
      <li>
        结账单:{{ money }} 元 折后价:{{ money2 }} 元 省了:{{ money3 }}
        元
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Work2App",

  data() {
    return {
      age: 0,
      num: 0,
      money: 0,
      money2: 0,
      money3: 0,
    };
  },

  mounted() {},

  methods: {
    btn(num) {
      this.money = 10 * num;
      this.money2 = this.money * 0.8;
      this.money3 = this.money - this.money2;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>